import React, { Component } from 'react'
import Counter from './Counter'
class Controlpannel extends Component {
  constructor (props) {
    super(props)
    this.onUpdate = this.onUpdate.bind(this)
    this.initValues = [1, 10, 20]
    const initSum = this.initValues.reduce((a, b) => a + b, 0)
    this.state = {
      sum: initSum
    }
  }
  onUpdate (newValue, previousValue) {
   const change = newValue - previousValue
   this.setState({
    sum: this.state.sum + change
   })
  }
  render () {
    console.log('render Contropannel render')
    return (
      <div>
        <Counter caption="First" initValue={ this.initValues[0] } onUpdate={this.onUpdate}/>
        <Counter caption="Second" initValue={ this.initValues[1] } onUpdate={this.onUpdate}/>
        <Counter caption="Third" initValue={ this.initValues[2]} onUpdate={this.onUpdate}/>
        <button onClick={() => this.forceUpdate()}>
          Click me to repaint
        </button>
        <p>total: {this.state.sum}</p>
      </div>
    )
  }
}
export default Controlpannel